import logo from './logo.svg';
import './App.css';
import HelloWord from './component/helloword';
import Welcome from './component/welcome';
import Combination from './component/combination';
import StateComponent from './component/stateComponent';
import Declare from './component/declare';
import InputNumber from './component/InputNumver';
import Condition from './component/condition';
import List from './component/list';
import Children from './component/children';
import RefsComponent from './component/refsComponent';

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.tableRef = React.createRef();  
  }
  refrechHandler() {
    this.tableRef.current.refresh();
  }
  render() {

    const start1 = 10;

    const start2 = 99;

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <HelloWord></HelloWord>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <Welcome name="Beike"></Welcome>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          <Combination></Combination>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            计时器
          </a>
          <StateComponent start={start1} ></StateComponent>
          <StateComponent start={start2} ></StateComponent>

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            生命周期
          </a>
          <Declare></Declare>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            计数器
          </a>
          <br />
          <InputNumber></InputNumber>
          <br />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            条件渲染
          </a>
          <br />
          <Condition></Condition>
          <br />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            列表渲染
          </a>
          <br />
          <List></List>
          <br />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            插槽
          </a>
          <br />
          <Children title={<h3>提交成功</h3>}
            content={<p>请核对并修改以下信息后，再重新提交。如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。</p>}
          >

          </Children>
          <br />
          <Children title={<h3>提交失败</h3>}
            content={<p>请核对并修改以下信息后，再重新提交。如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。</p>}
          >
          </Children>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Refs
          </a>
          <br />
          <button onClick = { this.refrechHandler.bind(this) }>刷新</button>
          <br />
          <RefsComponent ref={ this.tableRef }></RefsComponent>
          <br />
        </header>
      </div>
    );
  }
}
